<template>
	<el-card shadow="hover" style="height:800px;width: 100%;margin-left: 10px;overflow:scroll">
		<el-tabs tab-position="top">
			<el-tab-pane label="菜单权限">
				<el-tree ref="menu" :check-strictly="checkStrictly" :default-checked-keys="data.checked" node-key="id"
						 :data="menu.list" :props="menu.props" show-checkbox></el-tree>
			</el-tab-pane>
			<el-tab-pane label="数据权限">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="规则类型">
						<el-select v-model="data.dataPower" placeholder="请选择">
							<el-option
								v-for="item in dataPowerOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
<!--							<el-option label="全部可见" :value="0"></el-option>-->
<!--							<el-option label="本人可见" :value="1"></el-option>-->
<!--							<el-option label="所在部门可见" :value="2"></el-option>-->
<!--							<el-option label="所在部门及子级可见" :value="3"></el-option>-->
							<!--							<el-option label="选择的部门可见" value="5"></el-option>-->
							<!--							<el-option label="自定义" value="6"></el-option>-->
						</el-select>
					</el-form-item>
					<el-form-item label="选择部门" v-show="data.dataPower==4">
						<div class="treeMain" style="width: 100%;">
							<el-tree ref="dept" node-key="id" :data="data.list" :props="data.props"
									 show-checkbox></el-tree>
						</div>
					</el-form-item>
					<el-form-item label="规则值" v-show="data.dataPower==5">
						<el-input v-model="data.rule" clearable type="textarea" :rows="6"
								  placeholder="请输入自定义规则代码"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<div style="width: 100%;height: 70px;position: absolute;bottom: 0;left: 10px;border-top: 0px solid #E8E8E8;padding-top: 10px">
			<el-button style="margin-left: 30px" @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</div>
	</el-card>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
		porps:[],
        data() {
            return {
                visible: false,
                isSaveing: false,
                menu: {
                    list: [],
                    checked: [1, 2],
                    props: {
                        label: (data) => {
                            return data.name
                        }
                    }
                },
                data: {
                    dataPower: 0,
                    list: [],
                    checked: [],
                    props: {},
                    rule: "",
                    roleId: ""
                },
                dataPowerOptions: [],
                checkStrictly: true
            }
        },
        mounted() {
            this.getMenu()
            // this.getDept()
        },

        methods: {
            async open(data) {
                this.data.roleId = data.id
                this.data.dataPower = data.dataPower
                var res = await this.$API.user.role.getPowerById.post({roleId: this.data.roleId});
                this.data.checked = []
                if (res && res.code == 0) {
                    res.data.forEach(item => {
                        this.data.checked.push(item.id)
                    })
                }
                let _this = this;
                setTimeout(function () {
                    _this.checkStrictly = false
                }, 1000)

            },
            async submit() {
                this.isSaveing = true;

                //选中的和半选的合并后传值接口
                var checkedKeys = this.$refs.menu.getCheckedNodes().concat(this.$refs.menu.getHalfCheckedNodes())

                // var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
                // console.log(checkedKeys_dept)
                var powerIds = []
                checkedKeys.forEach(res => {
                    powerIds.push(res.id)
                })
                var data = {
                    powerIds: powerIds,
                    roleId: this.data.roleId,
					dataPower: this.data.dataPower
                }
                var res = await this.$API.user.role.permission.post(data);
                if (res && res.code == 0) {
                    this.isSaveing = false;
                    this.visible = false;
                    this.$message.success("操作成功")
                    this.$emit('success')
                }
            },
            async getMenu() {
                var res = await this.$API.system.menu.list.post()
                this.menu.list = res.data

                var options = await this.$API.system.menu.dataPowers.post()
                this.dataPowerOptions = options.data
                //获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
                // this.menu.checked = ["system", "user", "user.add", "user.edit", "user.del", "directive.edit", "other", "directive"]
                // this.$nextTick(() => {
                // 	let filterKeys = this.menu.checked.filter(key => this.$refs.menu.getNode(key).isLeaf)
                // 	this.$refs.menu.setCheckedKeys(filterKeys, true)
                // })
            },
            async getDept() {
                var res = await this.$API.system.dept.list.get();
                this.data.list = res.data
                this.data.checked = []
                this.$nextTick(() => {
                    let filterKeys = this.data.checked.filter(key => this.$refs.dept.getNode(key).isLeaf)
                    this.$refs.dept.setCheckedKeys(filterKeys, true)
                })
            }
        }
    }
</script>

<style scoped>
	.treeMain {
		height: 280px;
		overflow: auto;
		border: 1px solid #dcdfe6;
		margin-bottom: 10px;
	}
</style>
